<template>
  <div class="color-bg-text-wrapper">
    <span class="color-bg-text">
      <slot></slot>
    </span>
  </div>
</template>

<style lang="scss" scoped>
  .color-bg-text-wrapper {
    position: relative;
    display: inline-block;
    position: relative;
    padding: 4rpx;
    .color-bg-text {
      position: relative;
      z-index: 2;
      font-weight: 600;
      color: #131619;
    }
  }
  .color-bg-text-wrapper::after {
    content: "";
    width: 100%;
    height: 22rpx;
    background: linear-gradient( 270deg, rgba(229,246,255,0) 0%, rgba(210,241,255,0.91) 17%, #e7e570 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 0.7;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
  }
</style>
